import ScrollBarLayout from '@/components/ScrollBarLayout';
import Cls from 'classnames';
import MyIcon from '@/components/MyIcon';
import DetailInfoAssetList from './DetailInfoAssetList';
import DetailInfoMaterialList from './DetailInfoMaterialList';
import moment from 'moment';
import { useContext, useEffect, useMemo } from 'react';
import { ChangeControllerContext } from '../common/useOAUseContext';
import { Form, Select, Spin, Tooltip, TreeSelect, message, Button } from 'antd';
import { useDescriptions, Descriptions } from '@/components/Descriptions';
import { DescriptionsType, useDescriptionsType } from '@/components/DescriptionsType';
import { downloadTemplate, getFileNameNotType, splitFileUrl } from '@/utils';
import { IUseOAActionEnum } from '../common/useOAUseReducer';
import { UploadFormCommon } from '@/components/UploadForm';
import { TypographyTitle } from '@/components/Typography/TypographyTitle';
import { getBaseUrl } from '@/services/urlconst';
import { readReadShowFileService } from '@/services/BaseLayout';
import { EyeOutlined } from '@ant-design/icons';

export const DetailInfoCenterViewMainOA: React.FC<any> = ({ openAssetModalFun, openMaterialModalFun, changeEditAssetId, finish, pageTypeOA }: any) => {
  /** 引入上下文 */
  const { styleFixCls, isEdit, infoObj, useOADispatch } = useContext(ChangeControllerContext);

  /** 表单实例 */
  const [changeFromRef] = Form.useForm();

  /** 轻阅读预览 */
  const { readReadShowFileRun } = readReadShowFileService();

  /**轻阅读预览 */
  const onOpenReadOfdWord = (fieldUrl: string) => {
    readReadShowFileRun({ fieldPath: `${getBaseUrl()}${fieldUrl}` });
  };

  useEffect(() => {
    /** 设置表单1 */
    BasicMethods?.setFieldsValue({
      ...infoObj,
      createTime: infoObj.createTime ? moment(infoObj.createTime).format('YYYY-MM-DD') : '',
    });
    /** 设置表单2 */
    ReMethods?.setFieldsValue({
      ...infoObj,
      createTime: infoObj.createTime ? moment(infoObj.createTime).format('YYYY-MM-DD') : '',
      backTime: infoObj.backTime ? moment(infoObj.backTime).format('YYYY-MM-DD') : '',
    });
  }, [infoObj, finish]);

  // 表格表单配置信息
  const [BasicConfig, BasicMethods] = useDescriptions({
    labelWidth: 200,
    basicForm: changeFromRef,
    schemas: [
      {
        label: '申请日期',
        field: 'createTime',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        field: `applyCode`,
        label: `流水单号`,
        component: 'Input',
        disabled: true,
        placeholder: '自动带出',
      },
      {
        label: '申请人',
        field: 'createrName',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        label: '联系电话',
        field: 'createPhone',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        label: '申请部门/单位',
        field: 'createDepartmentName',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        label: '职务岗位',
        field: 'createPositionName',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
    ],
  });

  const ReColumnMemo: any = useMemo(() => {
    const obj = [
      {
        field: `queryType`,
        label: `申请类型`,
        component: 'Render',
        placeholder: '自动带出',
        render(text, record) {
          return record.queryType == '1' ? '领用申请' : record.queryType == '3' ? '借用申请' : '--';
        },
      },
      {
        field: 'belongDepartmentName',
        label: '货物所属部门',
        component: 'Render',
        disabled: true,
        placeholder: '自动带出',
        render: (text, record) => text || '--',
      },
      {
        field: `userName`,
        label: `使用人`,
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
        colSpan: 1,
      },
      {
        field: `backTime`,
        label: `预计归还日期`,
        component: 'Input',
        placeholder: '--',
        disabled: true,
        ishidden: infoObj?.queryType != 3,
        colSpan: 1,
      },
      {
        field: `useType`,
        label: `用途类型`,
        component: 'Render',
        placeholder: '自动带出',
        colSpan: 1,
        render(text, record) {
          return record.useType == '0' ? '共用' : '自用';
        },
      },
      {
        field: `applyType`,
        label: `货物类型`,
        component: 'Render',
        disabled: true,
        placeholder: '自动带出',
        colSpan: 1,
        render(text, record) {
          return record.applyType == 0 ? '资产&材料' : record.applyType == 1 ? '资产' : '材料';
        },
      },
      {
        field: `busiFlag`,
        label: '是否归口部门审批',
        component: 'Render',
        placeholder: '--',
        colSpan: 1,
        render(text, record) {
          return record.busiFlag == 1 ? '是' : '否';
        },
      },
      {
        field: `busiDepartmentID`,
        label: '归口部门',
        component: 'Render',
        placeholder: '--',
        colSpan: 1,
        render(text, record) {
          return record?.busiDepartmentName || '--';
        },
      },
      {
        field: `applyInfo`,
        label: `申请理由`,
        component: 'InputTextArea',
        disabled: true,
        placeholder: '请填写申请理由',
        colSpan: 2,
        allowClear: true,
        showCount: true,
        maxLength: 200,
        autoSize: { minRows: 2, maxRows: 4 },
      },
      {
        field: `applyFile`,
        label: `相关附件`,
        colSpan: 2,
        component: 'Render',
        disabled: true,
        placeholder: '请上传转移申请单',
        render: (text, record) => {
          const fileName = 'applyFile';
          return (
            <>
              <div
                style={{
                  height: '100%',
                  display: 'flex',
                  alignItems: 'center',
                  marginLeft: '8px',
                }}
              >
                {record?.[fileName]
                  ? splitFileUrl(record?.[fileName])?.map((e, i) => {
                      return (
                        <div>
                          <Tooltip title={e.attachName} key={new Date().getTime() * 25615265152 + e?.attachName}>
                            <a
                              onClick={() => {
                                message.success('下载中，请稍后...');
                                downloadTemplate('/assetInfo/downloadFile', e?.attachName, e?.attachUrl, () => {});
                              }}
                            >
                              <MyIcon type="icon-file-text-fill" />
                              &nbsp;
                              {getFileNameNotType(e.attachName, 8)}
                            </a>
                          </Tooltip>
                          {/* 轻阅读预览 */}
                          <Tooltip title={'在线预览'}>
                            <Button type="link" size="small" onClick={() => onOpenReadOfdWord(e?.attachUrl)} icon={<EyeOutlined />} />
                          </Tooltip>
                        </div>
                      );
                    })
                  : '--'}
              </div>
            </>
          );
        },
      },
      {
        field: `applyTitle`,
        label: `事项名称`,
        component: 'Input',
        disabled: true,
        placeholder: '自动带出',
        colSpan: 0,
      },
    ];

    /** 领用情况下 使用人展示colSpan=2 */
    if (infoObj?.queryType != 3) {
      obj[2].colSpan = 2;
      obj.splice(3, 1); // 删除【预计归还日期】配置项
    }

    return obj;
  }, [infoObj]);

  // 表格表单配置信息
  const [ReConfig, ReMethods] = useDescriptions({
    labelWidth: 200,
    basicForm: changeFromRef,
    schemas: ReColumnMemo,
  });

  return (
    <>
      <div className="commonTabsBodyDom">
        <div className={Cls('tabsBodyInfoDom', `${styleFixCls}updateFormBox`)}>
          <ScrollBarLayout style={{ padding: '20px 10%' }}>
            <Spin spinning={false}>
              <TypographyTitle
                children={`${infoObj?.queryType == '1' ? '领用' : infoObj?.queryType == '3' ? '借用' : '--'}申请`}
                style={{ textAlign: 'center', borderLeft: 'none' }}
                level={1}
              />
              <TypographyTitle children={'基本信息'} style={{ margin: '25px 0px 20px' }} level={2} />
              <Descriptions config={BasicConfig} />
              <TypographyTitle
                children={`${infoObj?.queryType == '1' ? '领用' : infoObj?.queryType == '3' ? '借用' : '--'}信息`}
                style={{ margin: '25px 0px 20px' }}
                level={2}
              />
              <Descriptions config={ReConfig} />

              {/* 资产列表数据 */}
              {infoObj?.applyNumberAssetList?.length > 0 && (
                <>
                  <TypographyTitle children={'资产详单'} style={{ margin: '25px 0px 20px' }} level={2} />
                  <DetailInfoAssetList
                    finish={finish}
                    dataList={infoObj?.applyNumberAssetList || []}
                    openAssetModalFun={openAssetModalFun}
                    changeEditAssetId={changeEditAssetId}
                  />
                </>
              )}

              {/* 材料列表数据 */}
              {infoObj?.applyNumberMaterialList?.length > 0 && (
                <>
                  <TypographyTitle children={'材料详单'} style={{ margin: '25px 0px 20px' }} level={2} />
                  <DetailInfoMaterialList
                    dataList={infoObj?.applyNumberMaterialList || []}
                    openMaterialModalFun={openMaterialModalFun}
                    pageTypeOA={pageTypeOA}
                  />
                </>
              )}
            </Spin>
          </ScrollBarLayout>
        </div>
      </div>
    </>
  );
};
